<template>
  <div class="bigbox">
    <div class="ipt">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="searchFn">查询</el-button>
      <el-button type="primary" @click="addFn">添加</el-button>
      <el-button type="primary" @click="resetFn">重置</el-button>
    </div>
    <div class="btm">
      <el-table border style="width: 100%" :data="getGoodLists">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="retail_price" label="售价"> </el-table-column>
        <el-table-column prop="goods_number" label="库存"> </el-table-column>

        <el-table-column prop="is_new" label="新品">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{
                scope.row.is_new === 1 ? "是" : "否"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_hot" label="人气">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{
                scope.row.is_hot === 0 ? "否" : "是"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_delete" label="上架">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{
                scope.row.is_delete === 0 ? "是" : "否"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sort_order" label="排序"> </el-table-column>

        <el-table-column prop="people" label="操作" width="120">
          <!-- <el-button type="primary" @click="editFn">编辑</el-button> -->
          <template slot-scope="scope">
            <el-button type="primary" @click="editFn(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="last">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodLists } from "../../request/httpApi";
export default {
  data() {
    return {
      input: "",
      arr: [
        "ID",
        "商品名称",
        "售价",
        "库存",
        "新品",
        "人气",
        "上架",
        "排序",
        "操作",
      ],
      getGoodLists: [],
      //   总条数
      count: 0,
      page: 1,
      name: "",
      size: 10,
      id: "",
    };
  },

  created() {
    this.fenye();

    // console.log(thpe.row.id);
  },

  methods: {
    //  搜索
    searchFn() {
      console.log(this.input);
      getGoodLists({
        page: this.page,
        name: this.input,
        size: 20,
      }).then((res) => {
        console.log(res);
        if (res.errno === 0) {
          this.getGoodLists = res.data.data;
          this.count = res.data.count;
        }
      });
    },

    // 添加
    addFn() {
      this.$router.push("/addgood");
      // console.log(11);
    },

    // 编辑
    editFn(e) {
      // console.log(e);
      this.$router.push(`/editgood/${e}`);
    },

    // 重置
    resetFn() {
      getGoodLists({
        page: this.page,
        name: "",
        size: 20,
      }).then((res) => {
        console.log(res);
        if (res.errno === 0) {
          this.getGoodLists = res.data.data;
          this.count = res.data.count;
        }
      });
      (this.input = ""), (this.page = 1);
    },

    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = `${val}`;
      console.log(this.size);
      this.fenye();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      //   console.log(this.page);
      this.fenye();
    },

    // 封装分页
    fenye() {
      getGoodLists({
        page: this.page,
        name: "",
        size: this.size,
      }).then((res) => {
        console.log(res);
        if (res.errno === 0) {
          this.getGoodLists = res.data.data;
          this.count = res.data.count;
          console.log(res.data.data);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bigbox {
  padding-top: 20px;
  padding-bottom: 160px;
  background-color: #fff;
  .ipt {
    padding-bottom: 20px;
    .el-input {
      width: 210px;
      margin-right: 15px;
      /deep/ .el-input__inner {
        height: 36px;
        line-height: 36px;
        border-radius: 5px;
      }
    }
  }

  .btm {
    .el-tag--medium {
      color: #333;
      background: #fff;
      border: none;
    }
  }
  .last {
    padding-top: 20px;
    position: absolute;
    right: 0;
  }
}
</style>
